<template>
	<view class="wrapper">
		<view class="Search">
			<input class="put" @confirm="confirm" @blur="confirm" @input="confirm" confirm-type="search" v-model="searchValue"
				:show-action="false" placeholder="请输入您要搜索的城市">
			</input>
		</view>
		<scroll-view class="calendar-list" scroll-y="true" :scroll-into-view="scrollIntoId">
			<!-- 国家/城市列表 -->
			<view class="" v-if="searchValue == ''">
				<view v-for="(item, index) in cityList" :id="index" :key="index">
					<view class="letter-header">{{ index }}</view>
					<view class="city-div" v-for="(city, i) in item" :key="i" @tap="back_city(city)">
						<text :class="CtId == city.id ? 'cityClass' : 'city'">{{ city.name }}</text>
					</view>
				</view>
			</view>
			<view class="" v-else>
				<!-- 搜索结果 -->
				<view class="city-div" v-for="(item, index) in searchList" :key="index" @tap="back_city(item)">
					<text :class="CtId == item.id ? 'cityClass' : 'city'">{{ item.name }}</text>
				</view>
			</view>
		</scroll-view>
		<!-- 右侧字母 -->
		<view class="letters" v-if="searchValue == ''">
			<view :class="selectLetter == index ? 'letters-item_back' : 'letters-item'" v-for="(item, index) in cityList"
				:key="index" @tap="scrollTo(index)">
				{{ index }}
			</view>
		</view>
		<!-- 选中之后字母 -->
		<view class="mask" v-if="showMask">
			<view class="mask-r">{{ selectLetter }}</view>
		</view>
	</view>
</template>

<script>
import address from "./address.js"; //测试数据，可根据业务需求替换为接口数据
export default {
	name: "WF-address",
	data() {
		return {
			selectLetter: "A", //右侧字母默认
			searchValue: "", //搜索文字
			scrollIntoId: "", //滚动位置id
			searchList: [], //搜索数据
			showMask: false, //mask展示
			cityList: [], //展示数据
			CtId: "", //选中 国家/城市 id
		};
	},
	mounted() {
		this.cityList = address;
	},
	methods: {
		scrollTo(letter) {
			this.showMask = true;
			this.selectLetter = letter;
			setTimeout(() => {
				this.showMask = false;
			}, 300);
			this.scrollIntoId = letter;
		},
		confirm(e) {
			this.searchList = [];
			var cityList = Object.entries(this.cityList);
			for (var i = 0; i < cityList.length; i++) {
				for (var w = 0; w < cityList[i][1].length; w++) {
					if (cityList[i][1][w].name.indexOf(this.searchValue) > -1) {
						this.searchList.push(cityList[i][1][w]);
					}
				}
			}
		},
		back_city(item) {
			this.CtId = item.id;
			this.$emit('getCityInfo', item);
		},
	},
};
</script>

<style lang="scss" scoped>
.letters-item_back {
	width: 32rpx;
	height: 32rpx;
	border-radius: 50rpx;
	background: linear-gradient(-44.2deg,
			rgba(163, 39, 241, 1) 0%,
			rgba(239, 108, 38, 1) 100%,
			rgba(245, 112, 40, 1) 100%);
	color: rgba(255, 255, 255, 1);
	font-size: 24rpx;
	font-weight: 400;
	line-height: 30rpx;
	text-align: center;
	margin-bottom: 10rpx;
}

.Search {
	padding: 0rpx 30rpx;
	margin: auto;
	border-radius: 50rpx;
	background: #fff;

	.put {
		background: #f4f4f4;
		padding: 35rpx 30rpx;
		border-radius: 100rpx;
	}
}

.wrapper {
	background: #ffffff;
}

.mask {
	position: absolute;
	bottom: 0rpx;
	top: 83rpx;
	left: 0rpx;
	right: 0rpx;
	width: 750rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	background: rgba(0, 0, 0, 0);
}

.mask-r {
	height: 120rpx;
	width: 120rpx;
	border-radius: 60rpx;
	display: flex;
	background: rgba(0, 0, 0, 0.5);
	justify-content: center;
	align-items: center;
	font-size: 40rpx;
	color: #ffffff;
}

.content {
	height: 100%;
	width: 100%;
	background-color: #ffffff;
}

.header {
	height: 85rpx;
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

.calendar-list {
	position: absolute;
	top: 110rpx;
	bottom: 0rpx;
	width: 100%;
	background-color: #ffffff;
}

.letters {
	position: absolute;
	right: 30rpx;
	bottom: 0px;
	width: 50rpx;
	top: 160rpx;
	color: #000000;
	text-align: center;
	font-size: 24rpx;
}

.letters-item {
	width: 32rpx;
	height: 32rpx;
	border-radius: 50rpx;
	margin-bottom: 10rpx;
	opacity: 1;
	color: rgba(0, 0, 0, 0.6);
	font-size: 24rpx;
	font-weight: 400;
}

.letter-header {
	font-size: 22rpx;
	color: #333333;
	padding-left: 24rpx;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	background-color: #ebedef;
	height: 64rpx;
	background: rgba(249, 250, 252, 1);
}

.city-div {
	width: 660rpx;
	height: 85rpx;
	margin-left: 24rpx;
	border-bottom-width: 1rpx;
	border-bottom-color: #f9fafc;
	border-bottom-style: solid;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-right: 35rpx;
}

.cityClass {
	font-size: 28rpx;
	font-weight: 400;
	letter-spacing: 1rpx;
	background-image: linear-gradient(to right, #f57028, #a327f1);
	background-clip: text;
	color: transparent;
	padding-left: 32rpx;
}

.city {
	padding-left: 32rpx;
	color: rgba(42, 23, 49, 1);
	font-size: 28rpx;
	font-weight: 400;
	letter-spacing: 1rpx;
}

/deep/.uni-input-input{
	padding: 20rpx 0;
}
</style>./address.js